<template>
    <div class="friend">
        <div class="header">{{ $t('msg.群聊') }}</div>
        <div class="content">
            <div class="lemon-sidebar__scroll list">
                <div class="item" v-for="(item, index) in list" :key="index" :class="active == index ? 'active' : ''"
                    @click="change(item, index)">
                    <img :src="item.avatar" alt="" class="avatar">
                    <div class="name">{{ item.displayName }}</div>
                </div>
            </div>
            <!-- <div class="friend_show" v-if="active > -1">
                <GroupInfo :contact="item" @ok="getList" />
            </div> -->
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import GroupInfo from "@/components/contacts/GroupInfo.vue"
export default {
    components: {
        GroupInfo
    },
    data() {
        return {
            active: -1,
            item: null,
            list_arr: [],
            list: []
        }
    },

    computed: {
        ...mapState(['contactKeywords']),
         ...mapState({
            allContacts: state => state.allContacts
        })
    },
    watch: {
        contactKeywords: {
            handler(value) {
                this.active = -1;
                this.item = null;
                let contact = this.list_arr;
                this.list = this.searchObject(contact, ['displayName', 'name_py'], value);
            }
        }
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.active = -1;
            this.$api.imApi.getContactsAPI().then(res => {
                let list = res.data;
                list = list.filter(item => item.is_group == 1);
                const sorted = list.sort((a, b) => {
                    if (a.index === '#') return 1;
                    if (b.index === '#') return -1;
                    return a.index.localeCompare(b.index, 'zh');
                });
                this.list_arr = this.list = sorted;
            })
        },
        change(item) {
            console.log(item)
            const im_id = item.id;
            const contact = this.allContacts.find(item => item.id == im_id);
            this.$store.commit('changeChatUser', contact);
            setTimeout(() => {
                this.$router.replace({
                    name: 'message'
                })
            }, 100)
        },
        // change(item, index) {
        //     this.item = item;
        //     this.active = index;
        // },
        searchObject(array, field, keywords) {
            let found = [];
            for (let i = 0; i < array.length; i++) {
                for (let j = 0; j < field.length; j++) {
                    let field_str = field[j];
                    let dataItem = array[i];
                    let str = dataItem[field_str];
                    if (str.includes(keywords)) {
                        found.push(array[i]);
                        break;
                    }
                }
            }
            return found;
        }
    }
}
</script>
<style lang="scss" scoped>
.friend {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #FCFCFE;

    .header {
        height: 92px;
        line-height: 92px;
        font-size: 20px;
        color: #333333;
        padding: 0 24px;
        box-sizing: border-box;
        background: #FCFCFE;
        box-shadow: inset 0px -1px 0px 0px rgba(104, 104, 104, 0.1);
    }

    .content {
        flex: 1;
        display: flex;
        overflow: hidden;

        .list {
            width: 430px;
            cursor: default;
            overflow-y: auto;

            .item {
                height: 88px;
                padding: 10px 24px;
                box-sizing: border-box;
                display: flex;
                align-items: center;

                &.active {
                    background-color: #D9E7FE;
                }

                &:hover:not(&.active) {
                    background: #e3e3e3
                }

                .avatar {
                    width: 52px;
                    height: 52px;
                    border-radius: 4px 4px 4px 4px;
                }

                .avatar {
                    width: 52px;
                    height: 52px;
                    border-radius: 4px 4px 4px 4px;
                }

                .name {
                    flex: 1;
                    padding-left: 12px;
                    box-sizing: border-box;
                    font-size: 18px;
                    color: #333333;

                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }

        .friend_show {
            flex: 1;

            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>